import React, { useState } from 'react'
import { Button, Flex } from 'antd'

import CustomCascader from './CustomCascader'
import Card, { useCard } from '@/pages/components/Card'
import Modal, { useModal } from '@/pages/components/Modal'


export default function Playground() {

    const card = useCard()

    const modal = useModal()

    return (
        <Flex vertical gap={8}>
            <Button onClick={()=> card.loading(true)}>打开card的loading属性</Button>
            <Button onClick={()=> card.loading(false)}>关闭card的loading属性</Button>
            <Card
                card={card}
                title="自定义Cascader"
            >
                <CustomCascader />
            </Card>
            <Card
                card={card}
                title="测试Modal"
            >
                <Button onClick={() => modal.open()}>打开Modal</Button>

                <Modal
                    modal={modal}
                    title="测试Modal"
                    onCancel={() => {
                        modal.close()
                        modal.closeLoading()
                    }}
                    onOk={() => {
                        modal.loading()
                    }}
                ></Modal>
            </Card>
        </Flex>
    )
}
